<template>
  <div class="hello">
    <h1>当前求和为:{{sum}}</h1>
    <h2>当前求和放大10倍:{{bigNum}}</h2>

    <div class="handleView">
      <select name="akk" v-model=num>
      <option :value=1>1</option>
      <option :value=2>2</option>
      <option :value=3>3</option>
      <option :value=4>4</option>
    </select>
    <button @click=INCREMENT(num)>+</button>
    <button @click=DECREMENT(num)>-</button>
    <button @click="oddIncrement(num)">当前求和奇数再加</button>
    <button @click="waitIncrement(num)">等一等再加</button>
    </div>
    <hr>
    <H4 style="color: red;"> presonList人数为{{presonList.length }}</H4>
  </div>
</template>

<script>
import {mapState, mapGetters, mapActions, mapMutations} from 'vuex'
export default {

  data(){
    return{
      num: 1
    }
  },
  computed:{
    
    ...mapState(['sum','presonList']),
    ...mapGetters(['bigNum']),
    // sum(){
    //   return this.$store.state.sum
    // },
    // bigNum(){
    //   return this.$store.getters.bigNum
    // }
  },
  methods:{

    ...mapMutations(['INCREMENT','DECREMENT']),
    ...mapActions(['oddIncrement','waitIncrement']),
    // increment(){
    //   this.$store.commit('INCREMENT',this.num)
    // },
    // decrement(){
    //   this.$store.commit('DECREMENT',this.num)
    // },
    // oddIncrement(){
    //   this.$store.dispatch('oddIncrement',this.num)
    // },
    // waitIncrement(){
    //   this.$store.dispatch('waitIncrement',this.num)
    // }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.handleView{
  display: flex;
  gap: 5px;
}
</style>
